﻿@{
    ViewBag.Title = "Index";
    if (Layout.IsEmpty()) { Layout = "~/Areas/Shared/Views/Shared/_LayoutK.cshtml"; }
}

<h2>Index</h2>
@using SchoolProject2012.Langue
<div  class="metro">
    <div class="metro-sections">
        <div id="section1" class="metro-section" >
            <a data-next="#section2" data-prior="#section1" href="#" id="arrow0" class="next-section"></a>

            <div class="tile  tile-triple tile-double-vertical bg-color-darken">
                        <div id ='slideshowHolder'>

                            <img src='~/Content/images/home-admission.jpg' alt='img1' />
                            <img src='~/Content/images/home-jpo-taupe.jpg' alt='img2' />
                            <img src='~/Content/images/home-londres.jpg' alt='img3' />
                            <img src='~/Content/images/home-masterewebmarket.jpg' alt='img4' />

                        </div>
              
            </div>

            <div rel="/Shared/Home/Informations?langue=@ViewBag.langue" class="tile tile-triple-vertical bg-color-purple">
                <span class="tile-label-top">@Resources.informations</span>
                <span class="tile-label">@Resources.infoContenu<br />@Html.ActionLink(Resources.suite, "Informations", new { area = "Accueil", langue = ViewBag.langue }, new { @class = "link" })</span>
                
            </div>

            <div rel="/Shared/Home/ContactCDP?langue=@ViewBag.langue" class="tile bg-color-pink">
                <span class="tile-label">@Resources.contactCDP</span>
            </div>

            <div rel="/@ViewBag.area/@Html.Raw("Home/?langue=")@ViewBag.langue" class="tile bg-color-blue">
                <span class="tile-label">@Resources.accesPlatform</span>
            </div>

        </div>
        <div id="section2" class="metro-section">      
        </div>
        <div id="section3" class="metro-section">      
        </div>
        <div id="section4" class="metro-section">      
        </div>
    </div>
</div>
<script>
    
    $(document).ready(function () {
        
        $('#slideshowHolder').jqFancyTransitions({ width: 520, height: 400, effect:'wave', delay: 5000, navigation: false, titleSpeed:1000});

    });

</script>
//    effect: '', // wave, zipper, curtain
//    width: 500, // width of panel
//    height: 332, // height of panel
//    strips: 20, // number of strips
//    delay: 5000, // delay between images in ms
//    stripDelay: 50, // delay beetwen strips in ms
//    titleOpacity: 0.7, // opacity of title
//    titleSpeed: 1000, // speed of title appereance in ms
//    position: 'alternate', // top, bottom, alternate, curtain
//    direction: 'fountainAlternate', // left, right, alternate, random, fountain, fountainAlternate
//    navigation: false, // prev and next navigation buttons
//    links: false // show images as links
<script type="text/javascript">
    $(function () {
        window.prettyPrint && prettyPrint();
    })

    $(".metro").metro();
  </script>